<!doctype html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

    <div th:replace="home/module/_header"></div>

    <!-- Property Single Slider header -->
    <section class="site-slider">
        <div id="siteslider" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#siteslider" data-slide-to="0" class="active"></li>
                <li data-target="#siteslider" data-slide-to="1"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active" style="background-image: url('/static/front/img/slider/1.jpg')"></div>
                <div class="carousel-item" style="background-image: url('/static/front/img/slider/2.jpg')"></div>
            </div>
            <a class="carousel-control-prev" href="#siteslider" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#siteslider" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <div class="property-single-title property-single-title-gallery">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-8">
                        <h2>[[${house.city.cityName}]]-[[${house.houseTitle}]]</h2>
                        <h6><i class="mdi mdi-home-map-marker"></i>
                            [[${house.number}]] ([[${house.category.cateName}]])
                        </h6>
                        <a th:if="${allowEdit}" th:href="@{'/admin/house/edit?id='+${house.id}}" target="_blank">编辑</a>
                    </div>
                    <div class="col-lg-4 col-md-4 text-right">
                        <h6 class="mt-2">
                            <span th:if="${house.houseStatus == 0}">未租出</span>
                            <span th:if="${house.houseStatus == 1}">已租出</span>

                        </h6>
                        <h2 class="text-success">¥ [[${house.dayPrice}]] <small>/日</small> = ¥ [[${house.monthPrice}]] <small>/月</small></h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Property Single Slider header -->
    <!-- Property Single Slider -->
    <section class="section-padding" style="padding: 50px;">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-8">
                    <div class="card">
                        <div class="card-body site-slider pl-0 pr-0 pt-0 pb-0">
                            <div id="sitesliderz" class="carousel slide" data-ride="carousel">
                                <ol class="carousel-indicators">
                                    <li data-target="#sitesliderz" th:each="url, status : ${imgUrlList}"
                                        th:classappend="${status.first?'active':''}"
                                        th:data-slide-to="${status.index}"></li>
                                </ol>
                                <div class="carousel-inner" role="listbox">
                                    <div class="carousel-item rounded" th:classappend="${status.first?'active':''}"
                                         th:each="url, status : ${imgUrlList}"
                                         th:style="${'background-image: url('+url+')'}"></div>
                                </div>
                                <a class="carousel-control-prev" href="#sitesliderz" role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#sitesliderz" role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4 col-md-4">
                            <div class="list-icon">
                                <i class="mdi mdi-sofa"></i>
                                <strong>卧室:</strong>
                                <p class="mb-0">[[${house.roomCount}]] 个</p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4">
                            <div class="list-icon">
                                <i class="mdi mdi-scale-bathroom"></i>
                                <strong>洗手间:</strong>
                                <p class="mb-0">[[${house.toiletCount}]] 个</p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4">
                            <div class="list-icon">
                                <i class="mdi mdi-move-resize-variant"></i>
                                <strong>面积:</strong>
                                <p class="mb-0">[[${house.area}]] m²</p>
                            </div>
                        </div>
                    </div>
                    <div class="card padding-card" th:if="${house.category.cateName == '合租'}">
                        <div class="card-body">
                            <h5 class="card-title mb-3">合租室友情况</h5>
                            <div>
                                <p th:each="order : ${orderList}">
                                    <a th:href="${'/house/'+order.house.id}" target="_blank">[[${order.house.number}]] </a>-
                                    <span th:if="${order.user == null}">暂未租出</span>
                                    <span th:if="${order.user != null}"><a th:href="${'/admin/user/info?userId='+order.user.id}" target="_blank">[[${order.user.userDisplayName}]]</a></span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="card padding-card">
                        <div class="card-body">
                            <h5 class="card-title mb-3">详细介绍</h5>
                            <div th:utext="${house.houseContent}"></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4">
                    <div class="card sidebar-card">
                        <div class="card-body">
                            <h5 class="card-title mb-4"><span th:text="出租方"></span></h5>
                            <div id="featured-properties">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <div class="card card-list">
                                            <a href="#">
<!--                                                <img class="card-img-top" th:src="${house.user.userAvatar}"-->
<!--                                                     alt="Card image cap">-->
                                                <div class="card-body pb-0">
                                                    <h5 class="card-title mb-4">[[${house.ownerName}]]</h5>
                                                    <h6 class="card-subtitle mb-3 text-muted"><i
                                                            class="mdi mdi-phone"></i>[[${house.ownerPhone}]]</h6>
<!--                                                    <h6 class="card-subtitle mb-3 text-muted"><i-->
<!--                                                            class="mdi mdi-email"></i>[[${house.user.email}]]</h6>-->
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card sidebar-card">
                        <div class="card-body">
                            <h5 class="card-title mb-4">立即租房</h5>
                            <form name="sentMessage" method="post">
                                <div class="control-group form-group">
                                    <div class="controls">
                                        <input type="hidden" id="houseId" th:value="${house.id}">
                                        <label>请选择退租日期 <span class="text-danger">*</span></label>
                                        <input type="date" class="form-control" id="endDate">
                                    </div>
                                </div>
                                <button th:if="${house.houseStatus == 0}" type="button" id="btn-addOrder"
                                        class="btn btn-success btn-block">预定
                                </button>
                                <button th:if="${house.houseStatus == 1}" type="button" class="btn btn-danger btn-block">
                                    已租出，暂时无法预定
                                </button>
                                <button type="button"data-toggle="modal"
                                        data-target="#report"  class="btn btn-warning btn-block">举报违规</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Sign Up Modal -->
    <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-labelledby="sign-up" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered login-pop-form" role="document">

            <div class="modal-content" id="sign-up">
                <div class="modal-body">
                    <div class="login-form">
                        <form id="feedbackForm">
                            <div class="row">
                                <div class="col-lg-12 col-md-12">
                                    <b>填写举报信息</b>
                                    <hr>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <label>违规类型</label>
                                        <div class="simple-input">
                                            <select  id="type" class="form-control">
                                                <option value="涉及诈骗">涉及诈骗</option>
                                                <option value="涉及侵权">涉及侵权</option>
                                                <option value="虚假内容">虚假内容</option>
                                                <option value="垃圾信息">垃圾信息</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <label>描述内容(选填)</label>
                                        <div class="input-with-icon">
                                        <textarea class="form-control" id="content" rows="5"
                                                  style="padding-left: 15px!important;"></textarea>
                                        </div>
                                    </div>
                                </div>


                            </div>

                            <div class="form-group">
                                <button type="button" id="btn-report"
                                        class="btn btn-primary btn-block">举报提交
                                </button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Modal -->
    <!-- End Property Single Slider -->
    <div th:replace="home/module/_footer"></div>
